<template>
  <div class="withdraw-update">

    <div class="tip-box">请输入新的提现密码</div>

    <div class="pwd-box">
      <ul class="mm_box" @click="openKeyBoard">
        <li class="num" v-for="(i,index) in items" :key="index" :class="password[i]?'mmdd':''"></li>
      </ul>
    </div>

    <div class="numb_box" v-if="showBoard">
      <div class="xiaq_tb">
        <img src="./pull.jpg" class="pull" @click="closeKeyBoard" onclick="return false">
      </div>
      <ul class="nub_ggg">
        <li @click="keyUpHandle($event)" v-for="val in keys" v-if="val!='清空'">
          <a href="javascript:void(0);">{{ val }}</a>
        </li>
        <li v-else @click="clearPwdHandle">
          <a href="javascript:void(0);">清空</a>
        </li>
        <li @click="delHandle">
          <a href="javascript:void(0);">删除</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "清空", 0];
  import md5 from 'js-md5'
  import {salt} from "../../config/env"

  export default {
    data() {
      return {
        items: [0, 1, 2, 3, 4, 5],
        password: [],
        keys: keys(),
        showBoard: false
      }
    },
    methods: {
      keyUpHandle(e) {
        let text = e.currentTarget.innerText
        let len = this.password.length
        if (!text || len >= 6) return
        this.password.push(text)
        this.newPwd();
      },
      delHandle() {//删除
        if (this.password.length <= 0)
          return false
        this.password.pop();
      },
      clearPwdHandle() {//清空
        this.password = [];
      },
      closeKeyBoard() {//关闭键盘
        this.showBoard = false;
      },
      openKeyBoard() {//开启键盘
        this.showBoard = true;
      },
      newPwd() {
        if (this.password.length >= 6) {
          let newPwd = this.password.join(' ').replace(/\s/g, '');
          sessionStorage.setItem("new_withpwd", md5(md5(newPwd) + salt));
          this.$router.push("/withdraw_pwdupsucc");
        }
        return false;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .withdraw-update
    width: 100%
    height: 100%
    background: rgba(255, 255, 255, 1)
    overflow: hidden
    .tip-box
      display: flex
      justify-content: center
      align-items: center
      margin-bottom: 0.56rem
      width: 100%
      height: 1.853rem
      font-size: 0.44rem
      color: rgba(68, 68, 68, 1)
      border-bottom: 1px solid rgba(230, 230, 230, 1)
    .pwd-box
      margin: 0 auto
      width: 90%
      height: 1.333rem
      border: 1px solid #CCCCCC;
      .mm_box
        display: flex
        width: 100%
        height: 1.333rem
        list-style: none
        .num
          flex: 1
          border-right: 1px solid #EEEEEE;
          height: 1.333rem
          width: 16.35%
          &:last-child
            border-right: 0rem
        .mmdd
          display: inline-block
          background: #FFF url(./dark.jpg) center no-repeat
          background-size: 25%

    .numb_box
      position: fixed
      background: #f5f5f5
      width: 100%
      bottom: 0rem
      height: auto
      .xiaq_tb
        width: 100%
        padding: 5px 0px
        text-align: center
        border-top: 1px solid #dadada
        margin: 0 auto
        display: table
        .pull
          width: 0.533333rem
          height: 0.333333rem
          margin-top: 0.183333rem
      .nub_ggg
        border: 1px solid #dadada
        overflow: hidden
        border-bottom: none
        width: 100%
        margin-top: 0.133333rem
        li
          width: 33.3333%
          border-bottom: 1px solid #dadada
          float: left
          text-align: center
          font-size: 0.426666rem
          a
            display: block
            color: #000
            height: 1.2rem
            line-height: 1.2rem
            overflow: hidden
            &:active
              background: #e0e0e0
            &:nth-child(1)
              border-left: 1px solid #dadada
              border-right: 1px solid #dadada
</style>
